<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import MachineDetail from '../components/tabComponents/machineDetail.vue'
  import RealtimeSingleIngot from '../components/tabComponents/spunyarn/realtimeSingleIngot.vue'
  import SingleIngotStatistics from '../components/tabComponents/spunyarn/singleIngotStatistics.vue'
  import SingleIngotAnalysis from '../components/tabComponents/spunyarn/singleIngotAnalysis.vue'
  import DoffBrokenEnd from '../components/tabComponents/spunyarn/doffBrokenEnd.vue'
  import SegmentPrediction from '../components/tabComponents/spunyarn/segmentPrediction.vue'
  import BandingSegmentPrediction from '../businessComponents/bandingSegmentPrediction.vue'
  import IngotSpeedAnalysis from '../components/tabComponents/spunyarn/ingotSpeedAnalysis.vue'
  import DoffPrediction from '../components/tabComponents/spunyarn/doffPrediction.vue'
  import DoffAnalysis from '../components/tabComponents/spunyarn/doffAnalysis.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '11310',
      label: '状态总览',
      roles: ['11310'],
      slots: { default: h(GroupStatus, { statusCode: '11310', processName: '细纱' }) }
    },
    {
      name: '11320',
      label: '单机详情',
      roles: ['11320'],
      slots: { default: h(MachineDetail, { statusCode: '11320', processName: '细纱' }) }
    },
    {
      name: '11330',
      label: '实时单锭',
      roles: ['11330'],
      slots: { default: h(RealtimeSingleIngot, { statusCode: '11330' }) }
    },
    {
      name: '11340',
      label: '单锭统计',
      roles: ['11340'],
      slots: {
        default: h(SingleIngotStatistics, { statusCode: '11340', processName: '细纱' })
      }
    },
    {
      name: '11350',
      label: '单锭分析',
      roles: ['11350'],
      slots: { default: h(SingleIngotAnalysis, { statusCode: '11350' }) }
    },
    {
      name: '113930',
      label: '一络纱分析',
      roles: ['113930'],
      slots: { default: h(DoffBrokenEnd, { statusCode: '113930' }) }
    },
    {
      name: '113900',
      label: '换段预测',
      roles: ['113900'],
      slots: {
        default: h(SegmentPrediction, { statusCode: '113900', processName: '细纱' })
      }
    },
    {
      name: '113910',
      label: '分班换段',
      roles: ['113910'],
      slots: { default: h(BandingSegmentPrediction, { statusCode: '113910' }) }
    },
    {
      name: '11390',
      label: '经济锭速分析',
      roles: ['11390'],
      slots: { default: h(IngotSpeedAnalysis, { statusCode: '11390' }) }
    },
    {
      name: '11360',
      label: '落纱预测',
      roles: ['11360'],
      slots: { default: h(DoffPrediction, { statusCode: '11360' }) }
    },
    {
      name: '11380',
      label: '落纱分析',
      roles: ['11380'],
      slots: { default: h(DoffAnalysis, { statusCode: '11380' }) }
    },
    {
      name: '113920',
      label: '设置变更',
      roles: ['113920'],
      slots: { default: h(ChangeSettings, { statusCode: '113920', processName: '细纱' }) }
    },
    {
      name: '11370',
      label: '历史趋势图',
      roles: ['11370'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '11370', processName: '细纱' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
